<template>
  <el-main>
    <el-button type="primary" @click="dialogVisible =true"> 发布交易需求</el-button>
    <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="type"
      label="交易类型"
      width="180">
    </el-table-column>
    <el-table-column
      prop="quota"
      label="碳额度数量"
      width="180">
    </el-table-column>
    <el-table-column
      prop="price"
      label="单价">
    </el-table-column>
    <el-table-column
      prop="seller"
      label="卖家">
    </el-table-column>
    <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button type="text" @click="handleTrade(scope.row)">查看详情</el-button>
                  <el-button type="text" @click="viewTransactionDetails(scope.row)">进行交易</el-button>
                </template>
              </el-table-column>
  </el-table>
  <el-dialog
  title="发布市场需求"
  :visible.sync="dialogVisible"
  width="30%">
  <el-form ref="form" :model="form" label-width="150px">
    <el-form-item label="交易类型">
                <el-radio-group v-model="form.transactionType">
                  <el-radio label="出售碳额度"></el-radio>
                  <el-radio label="购买碳额度"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="碳额度数量">
                <el-input v-model.number="form.tradingQuota"></el-input>
              </el-form-item>
              <el-form-item label="单价（碳币/单位）">
                <el-input v-model.number="form.pricePerUnit"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handlePublishDemand">发布需求</el-button>
              </el-form-item>
</el-form>
</el-dialog>
<el-dialog title="交易进行" :visible.sync="dialogVisible_x" width="30%">
      <p>交易类型：{{ xiangqing.type }}</p>
      <p>碳额度数量：{{ xiangqing.quota }}</p>
      <p>单价：{{ xiangqing.price }}</p>
      <p>卖家：{{ xiangqing.seller }}</p>
      <p>备注：无</p>
      <el-button type="primary" @click="dialogVisible_x = false">确定交易</el-button>
      <el-button type="" @click="dialogVisible_x = false">取消交易</el-button>
    </el-dialog>
    <el-dialog title="报告详情" :visible.sync="dialogVisible_xs" width="30%">
      <p>交易类型：{{ xiangqing.type }}</p>
      <p>碳额度数量：{{ xiangqing.quota }}</p>
      <p>单价：{{ xiangqing.price }}</p>
      <p>卖家：{{ xiangqing.seller }}</p>
      <p>当前汇率：1.5</p>
      <p>备注：无</p>
      <el-button type="primary" @click="dialogVisible_xs = false">关闭</el-button>
    </el-dialog>
  </el-main>

</template>

<script>
  export default {
    data() {
      return {
        xiangqing:{},
        form:{
          transactionType: '出售碳额度', // 初始交易类型
      tradingQuota: '', // 初始碳额度数量（数字类型）
      pricePerUnit: '', // 初始单价（数字类型）
        },
        dialogVisible_x:false,
        dialogVisible_xs:false,
        dialogVisible:false,
        tableData: [{
    type: '出售碳额度',
    quota: 100,
    price: 5.0,
    seller: '卖家A',
  },
  {
    type: '购买碳额度',
    quota: 200,
    price: 4.5,
    seller: '卖家B',
  },
  {
    type: '出售碳额度',
    quota: 150,
    price: 5.2,
    seller: '卖家C',
  },
  {
    type: '购买碳额度',
    quota: 300,
    price: 4.7,
    seller: '卖家D',
  },
  {
    type: '出售碳额度',
    quota: 80,
    price: 5.1,
    seller: '卖家E',
  },
  {
    type: '购买碳额度',
    quota: 250,
    price: 4.6,
    seller: '卖家F',
  },
  {
    type: '出售碳额度',
    quota: 120,
    price: 5.4,
    seller: '卖家G',
  },
  {
    type: '购买碳额度',
    quota: 350,
    price: 4.9,
    seller: '卖家H',
  },
  {
    type: '出售碳额度',
    quota: 170,
    price: 5.3,
    seller: '卖家I',
  },
  {
    type: '购买碳额度',
    quota: 400,
    price: 4.8,
    seller: '卖家J',
  },]
      }
    },
    methods:{
      handleTrade(row) {
      this.xiangqing = { ...row };
      console.log(this.xiangqing);
      this.dialogVisible_xs = true;
    },
      viewTransactionDetails(row) {
      this.xiangqing = { ...row };
      console.log(this.xiangqing);
      this.dialogVisible_x = true;
    },
      handlePublishDemand(){
        this.dialogVisible=false;
        this.$message({
              message: "发布成功",
              type: 'success'
            });
      }
    }
  }
</script>